// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/display.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

ion-title{
    font-weight: normal;
}
ion-item{
    --border-color:#E8E9EC;
}
ion-col,.native-input.sc-ion-input-ios,.native-input.sc-ion-input-md,ion-img{
    font-size: 14px;
}
//快捷投注的底部的input的字体大小
.fast-bet-operating{
    .native-input.sc-ion-input-ios,.native-input.sc-ion-input-md{
        font-size: 12px;
    }
}
.sc-ion-buttons-ios-s ion-button{
    --padding-start:0px; margin-left: -2px;
}
//侧滑的菜单
.lotMenu{
    --width:60%;
   .menu-header{
       text-align: center; margin-top: 1rem;
       ion-avatar{
           margin: 0 auto;
       }
       p{
           margin: 0px; text-align: center;
       }
   }
   .menu-father-item{
        border-bottom:1px solid #E8E9EC;
   }
   .menu-father{
     padding-left: 1rem; --color: #ff6161;
    }
    .menu-font{
        font-size: 0.85rem;
    }
}
.lotTwoMenu{
    --width:80%;
   ion-grid{
     padding: 0px;
     ion-col{
        padding: 4px; margin: 0px; text-align: center;
        span{
            font-size: 0.6rem; height: 1.7rem; line-height: 1.7rem;  background: #fff; display: inline-block; width: 100%;  color: #000; position: relative; border: 1px solid #d0d0d0;
            .img{
                height:1.64rem; position: absolute; top: 0px; left: 0px;
            }
        }
     }
     .lotTwoMenu-groupname{
        height: 1.5rem; line-height: 1.5rem; text-align: left; position: relative; background: #fff; font-size: 0.6rem; font-weight: bold; margin-bottom: 6px; color: #676767; padding-left: 20px;
        -moz-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12); -webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12); box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);
        span{
            &.lot-name{
                padding: 2px 0px 2px 10px;vertical-align: super;
            }
            &.lot-blank{
                display: inline-block;
                width: 4px; 
                background: #d50035;
                height: 0.9rem;
                border-radius: 4px;
            }
        }
    }
   }
   .lot-hot{
       color: #fff; background: #ec002d;
   }
}

.menu-mark{
    z-index: 1000; width: 100%; height: 100%;  background: rgba(0,0,0,0.5); position: relative;
    &.lotMenu-one{
        padding-right: 40%; display: none;
        ion-content{
            --padding-bottom: 50px;
        }
        ion-footer{
            position: fixed; bottom: 0px; width: 60%;
        }
        .lotMenu-blank{
            height: 100%; position: fixed; width: 40%; background: transparent; right: 0px;z-index: 1001;
        }
    }
    &.lotMenu-two{
        padding-left: 20%; display: none;
        .lotTwoMenu-blank{
            height: 100%; width: 20%; background: transparent; position: fixed; left: 0px; z-index: 1001;
        }
    }
}
//ios真机沉浸式状态栏的出现的情况特殊处理
.iosDevice{
    .avatar-div{
        height: 120px !important;  padding: 30px 10px 10px !important;
    }
    .lotABCD-content{
        top: 64px !important;
    }
    .lotTwoMenu ion-grid{
        padding-top: 20px;
    }
    .lotMenu .menu-header{
        padding-top: 20px;
    }
    .down-menu-mark{
        top: 64px !important;
    }
} 
.iosXDevice{//处理iPhone的安全区域的问题
    .avatar-div{
        height: 144px !important;  padding: 30px 10px 10px !important;
    }
    .lotABCD-content{ 
        top: 88px !important;
    }
    .fast-footer{
        height:114px !important; padding-bottom: 24px;
    }
    .lotTwoMenu ion-grid{
        padding-top: 44px;
    }
    .lotMenu .menu-header{
        padding-top: 44px;
    }
    .lotMenu-footer{
        padding-bottom: 34px;
    }
    .lot-content-iPhoneX{
        padding-bottom: 110px !important;
        &.fastShowStateiPhoneX{
            padding-bottom: 120px !important;
        }
    }
    .down-menu-mark{
        top: 88px !important;
    }
} 
/*android顶部的导航栏置顶的处理*/
.platform-android{
    .nav-header {
        padding-top: 22px;
        background: -webkit-linear-gradient(left, #ff6163 , #e9385d); 
        background: -o-linear-gradient(right, #ff6163, #e9385d); 
        background: -moz-linear-gradient(right, #ff6163, #e9385d); 
        background: linear-gradient(to right, #ff6163 , #e9385d); 
    }
    .lotABCD-content{
        top: 64px !important;
    }
    .avatar-div{
        height: 120px !important;  padding: 30px 10px 10px !important;
    }
    .down-menu-mark{
        top: 64px !important;
    }
}


//处理媒体的基础的字体单位化
html,body{
    font-size: 20px !important;
}
@media screen and (min-width:375px){html,body{font-size: 20px !important;}}
@media screen and (min-width:414px){html,body{font-size: 20.08px !important;}}
@media screen and (min-width:320px){html,body{font-size: 17.06px !important;}}
@media screen and (min-width:411px){html,body{font-size: 21.92px !important;}}
@media screen and (min-width:360px){html,body{font-size: 19.2px !important;}}
@media screen and (min-width:384px){html,body{font-size: 20.48px !important;}}
@media screen and (min-width:480px){html,body{font-size: 25.6px !important;}}
@media screen and (min-width:600px){html,body{font-size: 32px !important;}}
@media screen and (min-width:720px){html,body{font-size: 38.4px !important;}}
@media screen and (min-width:768px){html,body{font-size: 40.96px !important;}}
@media screen and (min-width:800px){html,body{font-size: 42.66px !important;}}
@media screen and (min-width:834px){html,body{font-size: 44.48px !important;}}
@media screen and (min-width:900px){html,body{font-size: 48px !important;}}
@media screen and (min-width:1024px){html,body{font-size: 54.61px !important;}}

/*公共的导航条*/
.nav-header{
    ion-toolbar{ 
        --background: -webkit-linear-gradient(left, #ff6163 , #e9385d); 
        --background: -o-linear-gradient(right, #ff6163, #e9385d); 
        --background: -moz-linear-gradient(right, #ff6163, #e9385d); 
        --background: linear-gradient(to right, #ff6163 , #e9385d); 
        ion-title{
            color: #fff;
        }
        ion-buttons{
            ion-button{
                --color: #fff; --color-activated:#fff; --color-focused:#fff; --color-hover:#fff;
            }
        }
        .toolbar-white{
            color: #fff;
        }
    }
}
/*底部的返回按钮的颜色完全限定*/
.md-arrow-back{
    color: #fff;
}
/*底部的导航*/
ion-tabs ion-tab-button ion-label{
    font-size: 10px;
}
//首页弹出的公告
.notice-pop-win{
    position: absolute; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 1000;  display: none;
    .notice-pop-contain{
       width: 230px; height: 300px; border-radius: 5px; background: #fff; position: relative;  left: 50%; margin-left: -115px; top: 50%;  margin-top: -150px;
       .notice-tit{
           height: 40px; background: -webkit-linear-gradient(left, #ff6163 , #e9385d); background: -o-linear-gradient(right, #ff6163, #e9385d); background: -moz-linear-gradient(right, #ff6163, #e9385d);  background: linear-gradient(to right, #ff6163 , #e9385d);  font-size: 16px;
           border-top-right-radius: 5px; border-top-left-radius: 5px; color: #fff; position: relative; line-height: 40px; text-align: center;
           i{
               position: absolute; right: 10px; cursor: pointer;
           }
       }
       .notice-title{
           height: 30px; color: #000; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px; font-weight: bold; line-height: 30px; border-bottom: 1px solid #E8E9EC;
       }
       .notice-contain{
           height: 190px; overflow: auto; font-size: 12px; color: #666; padding: 5px;
       }
       .notice-tool{
           height: 40px; position: absolute; bottom: 0px; display: flex;  width: 100%; border-top: 1px solid #E8E9EC;
           .notice-tool-btn{
                &:first-child{ border-right: 1px solid #E8E9EC;}
               width: 100%; text-align: center; line-height: 40px; cursor: pointer; font-size: 14px;  
               &.has-next{
                   color: #ff6163;
               }
           }
       }
    }
}
// 个人中心的图片剪裁
.alloy-crop-box{
    img{
        max-width: none !important;
    }
}

//第三方的下载的弹出页面
.mask-3rd{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100001;
    background: rgba(0,0,0,0.5);
    .mask-3rd-content{
        width: 300px;
        height: 380px;
        background: #fff;
        position: absolute;
        top: 50%;
        margin-top: -190px;
        left: 50%;
        margin-left: -150px;
        border-radius: 10px;
        .mask-3rd-header{
            background: linear-gradient(to right, #ff7a7c, #f73e88);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            height: 40px;
            font-size: 16px;
            text-align: center;
            color: #fff;
            line-height: 40px;
            padding: 0px;
            position: relative;
        }
        .mask-3rd-name{
            color: #878787;
            font-size: 12px; 
            padding: 30px 0px 20px 10px;
            margin: 5px 0px; 
        }
        .mask-3rd-money{
            font-size: 12px;
            padding: 30px 10px 20px 10px;
            .mask-3rd-money-span{
                span{
                    width: 50px; height: 20px; border:1px solid #ff7a7c; line-height: 20px; text-align: center; border-radius: 20px; display: inline-block; margin-right: 5px; font-weight: bold; color: #717171;
                }
            }
        }
        .mask-3rd-input{
            padding: 0px 10px;
            .mask-3rd-input-tip{
                font-size: 12px; color: #878787;
                margin-top: 5px;
                font-weight: 600;
            }
        }
        .mask-3rd-btn-group{
            border-top: 1px solid #E8E9EC;
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0px 10px;
            div{
                font-size: 12px;
                width: 130px;
                background: linear-gradient(to right, #ff7a7c, #f73e88);
                color: #fff;
                border-radius: 10px;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
        }
    }
    .sbo{
        margin: 0 auto;
    }
}

// 解决tab的背景透明问题
.tabs-inner{
    margin-bottom: -50px;
    ion-content{
        --padding-bottom: 60px;
    }
}
ion-footer{
    margin-bottom: 50px;
    &.lotdetail-footer{
        margin-bottom: 0px;
    }
}

//登录注册,找回密码的背景兼容webp的处理
@mixin webpbg($url) {
    --background: url('#{$url}.150.gif') center/cover no-repeat;
      background: url('#{$url}.150.gif') center/ cover no-repeat;
    .webp & {
      --background: url('#{$url}.webp') center/cover no-repeat;
      background: url('#{$url}.webp') center/ cover no-repeat;
    }
  }
ion-content.bgWebp{
    @include webpbg('assets/img/bg.jpg');
}

//交易记录中的弹出的button的样式
.alert-button.firstBtn,.alert-button.secondBtn{
    margin: 0px 10px;
    min-width: 40px;
    margin-bottom: 10px;
    border: none;
    width: 40px;
    height: 35px;
    color:#fff;
    border-radius: 5px;
    font-weight: normal !important;
}
.alert-button.firstBtn{
    background: linear-gradient(to right, #cbd1e3, #a4aed1);
}
.alert-button.secondBtn{
    background: linear-gradient(to right, #ffe4e4, #ff9290);
}





